<template>
    <div>
        <div style="height: 10%; width: 100%; display: flex; align-items: center;" v-if="isCollapse">
            <el-button @click="isCollapse = false" link style="width: 100%; height: 64px;">
                <el-icon style="font-size: 2em; color: #fff;">
                    <Expand />
                </el-icon>
            </el-button>
        </div>
        <div style="height: 10%; width: 100%; display: flex; align-items: center;" v-else>
            <img
                :src="Logo2"
                alt="云诊所"
                style="width: 80%; object-fit: contain; cursor: pointer;"
                @click="routerInstance.push('/')"
            />
            <el-button  @click="isCollapse = true" link style="height: 56px;">
                <el-icon style="font-size: 2em; color: #fff;">
                    <Fold />
                </el-icon>
            </el-button>
        </div>
        <div style="height: 90%;">
            <el-scrollbar height="100%;">
                <el-menu
                    default-active="1"
                    :router="true"
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    style="height: 100%; border:0 !important; background-color: #6A5ACD;"
                    :unique-opened="true"
                >
                    <div 
                        v-for="(systemRouter, index) of systemRouterStore.getRouterTree()" 
                        :key="index"
                    >
                        <el-sub-menu v-if="systemRouter.type == 0" :index="''+ (index + 1)" 
                            :class="{ 'menu-collapse': isCollapse }" 
                            :style="{ 'background-color': systemRouter.isMouse ? '#fff': '#6A5ACD' }"
                        >
                            <template #title>
                                <el-icon v-if="systemRouter.iconName">
                                    <component 
                                        style="font-size: 1.5em;" 
                                        :style="{ 'color': systemRouter.isMouse ? '#6A5ACD' : '#fff' }" 
                                        :is="systemRouter.iconName" 
                                    />
                                </el-icon>
                                <span 
                                    v-show="!isCollapse"
                                    :style="{ 'color': systemRouter.isMouse ? '#6A5ACD' : '#fff' }"
                                    style="font-weight: 700; margin-left: 20px;"
                                >{{ systemRouter.title }}</span>
                            </template>
                            <el-menu-item v-show="!isCollapse" v-for="(children, childrenIndex) of systemRouter.children" :key="childrenIndex" :index="children.path"
                                style="background-color: #6A5ACD; color: #fff; font-weight: 700"
                            >
                                {{ children.title }}
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item v-else-if="systemRouter.type == 1" :index="systemRouter.path" 
                            :class="{ 'menu-collapse': isCollapse }" 
                            :style="{ 'background-color': systemRouter.isMouse ? '#fff': '#6A5ACD' }"
                        >
                            <el-icon>
                                <component 
                                    style="font-size: 1.5em;" 
                                    :style="{ 'color': systemRouter.isMouse ? '#6A5ACD' : '#fff' }" 
                                    :is="systemRouter.iconName" 
                                />
                            </el-icon>
                            <span 
                                v-if="!isCollapse"
                                :style="{ 'color': systemRouter.isMouse ? '#6A5ACD' : '#fff' }"
                                style="font-weight: 700; margin-left: 20px;"
                            >{{ systemRouter.title }}</span>
                        </el-menu-item>
                        <div class="flex-grow" />
                    </div>
                </el-menu>
            </el-scrollbar>
        </div>
    </div>
</template>
<script setup>

</script>